<template>
	<!-- <view :style="{ border:' 1px dashed red' }" >
            <view>123321321321312321--test----{{msg}}</view>
            <view>123321321321312321--test----{{test1}}</view>
            <view>123321321321312321--test----{{msgC}}</view>
        <u-button type="error">危险按钮</u-button>
            <view>
             注册 <button @click="childPropMsg">小——》大点击给父组件发送数据</button>
            </view>

    </view> -->
	<view>
		<!-- <view>
     <u-navbar   back-text="返回" title="注册账号"></u-navbar>
    </view> -->
		<view class="registerP">
			<view class="user-pwd">
				<view class="pwdP">
					<image :style="{ width: '1.3rem', height: '1.3rem' }" src="../../style/image/login/A7.png" alt="" />
					<view class="inputC">
						<u-input :clearable="true" v-model="phoneInput" type="text" placeholder="注册手机号" />
					</view>
					<view>
						<!-- <image  :style="{  visibility: 'hidden', width:'0.9rem' ,height:'0.9rem' }" src="../../style/image/login/A3.png" alt="" /> -->
					</view>
				</view>

				<view class="pwdP">
					<image :style="{ width: '1.3rem', height: '1.3rem' }" src="../../style/image/login/A6.png" alt="" />
					<view class="inputC">
						<u-input :clearable="true" v-model="userInput" type="text" placeholder="注册姓名" />
					</view>
					<view>
						<!-- <image  :style="{  visibility: 'hidden', width:'0.9rem' ,height:'0.9rem' }" src="../../style/image/login/A3.png" alt="" /> -->
					</view>
				</view>

				<view class="pwdP">
					<image :style="{ width: '1.3rem', height: '1.4rem' }" src="../../style/image/login/A2.png" alt="" />
					<view class="inputC" style="padding-left: 0rem">
						<u-input v-model="pwdInput" :type="passwordType" placeholder="密码" />
					</view>
					<!-- <image   :style="{  width:'1rem',height:'1rem' }" src="../../style/image/login/A4.png" alt="" /> -->
				</view>

				<view class="pwdP">
					<image :style="{ width: '1.3rem', height: '1.4rem' }" src="../../style/image/login/A2.png" alt="" />
					<view class="inputC" style="padding-left: 0rem">
						<u-input v-model="pwdInputs" :type="passwordType" placeholder="密码" />
					</view>
					<!-- <image :style="{  width:'1rem' ,height:'1rem'}" src="../../style/image/login/A4.png" alt="" /> -->
				</view>

				<view class="pwdP">
					<image :style="{ width: '1.4rem', height: '1.3rem' }" src="../../style/image/login/A5.png" alt="" />
					<view class="inputC" style="padding-left: 2rem">
						<u-input v-model="verifyInput" type="text" placeholder="获取验证码" />
					</view>

					<view v-if="canClick" @click="sendNum" :style="{ color: '#41c396', width: '5rem', textAlign: 'center' }">获取验证码</view>

					<u-count-down @end="endM" :style="{
              color: '#41c396',
              width: '5rem',
              display: 'flex',
              justifyContent: 'center',
            }"
					 v-else ref="uCountDown" :show-hours="false" :timestamp="60"></u-count-down>
				</view>
			</view>

			<view class="loginBtnP">
				<view class="loginBtn" @click="goRecommend">确认注册</view>
			</view>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";

	import "@/uview-ui/components/u-button/u-button.vue";
	import uNavbar from "@/uview-ui//components/u-navbar/u-navbar.vue";
	import { globalModule } from '../../utils/uniRequest';

	import {
		registerCDB,
		sendMsgCDB
	} from "../../utils/uniApi";

	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
		//         filters:{
		//     Test(arg: string){
		//       return arg + "  我来刷点存在感"
		//     }
		//   },
		//   directives:{
		//     Test(arg: string){
		//       return arg + "  我来刷点存在感"
		//     }
		//   }
	})
	export default class extends Vue {
		// props: ['postTitle'],

		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;

		childMsg: string = "自组件的数据";

		//test:string=msg
		test1: string = "eqweqweqweqw";

		msgC: string = "子组件的msgC数据";

		public phoneInput = "";
		public userInput = "";
		public pwdInput = "";
		public pwdInputs = "";
		public passwordType = "password";
		public verifyInput = "";
		public canClick = true;

		public timestamp = 6;
		public seconds = 0;

		public recCode = ""; //推荐吗
		created() {
			// uni.showNavigationBarLoading()
			// wx.setNavigationBarTitle({
			//   title: "注册账号",
			// });
			console.log("313123123");
		}

		onLoad(option: any) {
			console.log(option, "option");

			this.recCode = option.num;
		}

		onShow() {
			
		}

		goBack() {
			console.log("123312");

			uni.navigateTo({
				url: "../login/index",
			});
		}

		sendNum() {
			if (this.canClick == true) {
				console.log("发送验证码");

				var params = {
					phone: this.phoneInput,
					recCode: this.recCode,
					type: "register",
				};
				console.log("发送验证码 参数：" + JSON.stringify(params));
				sendMsgCDB(params).then((res: any) => {
					// console.log(6)

					(this.$refs.uToast as any).show({
						title: res.data.message,
						type: "primary",
					});
				});

				this.canClick = false;
			} else {
				this.canClick = true;
			}
		}

		endM() {
			console.log("倒计时结束");
			this.canClick = true;
		}

		goRecommend() {
			if (this.pwdInput == this.pwdInputs) {
				console.log(123);

				let params = {
					// clientid:'',
					oid: globalModule.oid,
					code: this.verifyInput,
					password: this.pwdInput,
					name: this.userInput,
					phone: this.phoneInput,
					recCode: this.recCode,
				};

				registerCDB(params).then((res: any) => {
					// console.log(res+'res8888')

					(this.$refs.uToast as any).show({
						title: res.data.message,
						type: "primary",
					});

					if (res.data.message == "注册成功") {
						console.log("注册成功");

						uni.navigateTo({
							url: "../login/index",
						});

					}
				});
			} else {
				(this.$refs.uToast as any).show({
					title: "请确认两次密码！",
					type: "error",
				});
			}
		}

		mounted() {
			//  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
		}
		//   onBackPress(options:any) {
		//   console.log(options,'12312312312')
		// 	// if (options.from === 'backbutton') {
		// 	// 	if (this.editShow.edit) {
		// 	// 		uni.showModal({
		// 	// 			title: '提示',
		// 	// 			content: '回执信息未保存，是否离开',
		// 	// 			success: res => {
		// 	// 				if (res.confirm) {
		// 	// 					uni.navigateBack();
		// 	// 				}
		// 	// 			}
		// 	// 		});
		// 	// 		// 禁止默认返回
		// 	// 		return true;
		// 	// 	}
		// 	// }
		// }

		@Emit("bindSend") //@Emit()不传参数,那么它触发的事件名就是它所修饰的函数名.
		send(msgC: string) {
			//return 123      //如果没有返回值 那么传递的参数就是参数
		}

		childPropMsg() {
			//方法中获取this
			this.msgC = "子组件的msg数据,被传给了父组件";
			this.send(this.msgC);
		}

		@Watch("$route")
		routechange(to: any, from: any) {
			console.log(to);
		}

		@Watch("timestamp")
		userInputM(a: any, b: any) {
			console.log(a, b);
		}

		//         // dynamic component
		// 51   $refs!: {
		// 52     helloComponent: Hello
		// 53   }
	}
</script>

<style lang="scss" scoped>
	.uni-page-head__title {
		font-weight: 400;
	}

	.registerP {
		padding: 1rem 2rem;
	}

	.userP {
		display: flex;
		align-items: center;
		margin: 2rem 0rem 1rem 0rem;
		padding: 0.3125rem 0rem;
		border-bottom: 1px solid #dfdfdf;
		justify-content: space-between;
	}

	.pwdP {
		display: flex;
		align-items: center;
		margin: 2rem 0rem 1rem 0rem;
		padding: 0.3125rem 0rem;
		border-bottom: 1px solid #dfdfdf;
		justify-content: space-between;
	}

	.inputC {
		width: 80%;
		padding-left: 1rem;
	}

	.loginBtnP {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.loginBtn {
		width: 14rem;
		padding: 0.5rem;
		background-color: #02af74;
		border-radius: 0.5rem;
		color: white;
		text-align: center;
		font-size: 1.1rem;
	}

	.user-pwd {
		margin-bottom: 2rem;
	}
</style>
